﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Sys.WebRes.Publish.Areas.Admin.Models.TagModel>>" %>
    <script src="<%=Url.Content("~/Scripts/jquery.ui.core.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/jquery.ui.widget.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/jquery.ui.position.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/jquery.ui.autocomplete.js")%>" type="text/javascript"></script>
    
    <script language="javascript" type="text/javascript">
	    $(function () {
	        var availableTags = [
            <% if(Model != null) foreach (var item in Model) { %>
                "<%= Html.Encode(item.Name) %>",
            <% } %>""
		];
	        function split(val) {
	            return val.split(/,\s*/);
	        }
	        function extractLast(term) {
	            return split(term).pop();
	        }

	        $("#Tags")
	        // don't navigate away from the field on tab when selecting an item
			.bind("keydown", function (event) {
			    if (event.keyCode === $.ui.keyCode.TAB &&
						$(this).data("autocomplete").menu.active) {
			        event.preventDefault();
			    }
			})
			.autocomplete({
			    minLength: 0,
			    source: function (request, response) {
			        // delegate back to autocomplete, but extract the last term
			        response($.ui.autocomplete.filter(
						availableTags, extractLast(request.term)));
			    },
			    focus: function () {
			        // prevent value inserted on focus
			        return false;
			    },
			    select: function (event, ui) {
			        var terms = split(this.value);
			        // remove the current input
			        terms.pop();
			        // add the selected item
			        terms.push(ui.item.value);
			        // add placeholder to get the comma-and-space at the end
			        terms.push("");
			        this.value = terms.join(", ");
			        return false;
			    }
			});
	    });
	</script>